import { useId } from "react";

export function AiLogo({ width = 24 }) {
  return <Sparkles width={width} />;
}

export function PagesLogo({ width = 28 }) {
  return (
    <svg
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
      width={width}
    >
      <path d="M7.125 2.5l-.65 1H3v9h2.9l-.175 1H2.5L2 13V3l.5-.5h4.625zm3.15 0H13.5l.5.5v10l-.5.5H8.875l.65-1H13v-9h-2.9l.175-1z" />
      <path d="M7.15 9.5h-2.9l-.425-.775 5.2-8 .9.375L8.85 6.5h2.9l.425.775-5.2 8-.9-.375L7.15 9.5zM3.725 4.575a.35.35 0 100-.7.35.35 0 000 .7zM4.65 4.575a.35.35 0 100-.7.35.35 0 000 .7zM5.575 4.575a.35.35 0 100-.7.35.35 0 000 .7z" />
    </svg>
  );
}

export function WorkersLogo({ width = 28 }) {
  return (
    <svg
      aria-label="Cloudflare Workers"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="false"
      focusable="false"
      width={width}
      className="fill-current"
    >
      <path d="M6.21 12.293l-3.215-4.3 3.197-4.178-.617-.842-3.603 4.712-.005.603 3.62 4.847.623-.842z" />
      <path d="M7.332 1.988H6.095l4.462 6.1-4.357 5.9h1.245L11.8 8.09 7.332 1.988z" />
      <path d="M9.725 1.988H8.472l4.533 6.027-4.533 5.973h1.255l4.303-5.67v-.603L9.725 1.988z" />
    </svg>
  );
}

export function CallsLogo({ width = 28 }) {
  return (
    <svg
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 64 64"
      aria-hidden="true"
      focusable="false"
      width={width}
    >
      <path
        fill="currentColor"
        fillRule="evenodd"
        d="M22.042 41.959c4.322 4.322 9.34 8.043 13.56 10.83 4.681 3.091 10.79 2.76 15.628-.493l6.707-4.511-12.955-9.917-6.551 6.504-2.824-.005-15.974-15.974-.005-2.823 6.505-6.552-9.918-12.955-4.51 6.707C8.45 17.61 8.12 23.717 11.21 28.4c2.787 4.22 6.508 9.237 10.83 13.56Zm11.355 14.168c-4.346-2.87-9.603-6.759-14.184-11.34-4.58-4.581-8.47-9.837-11.34-14.184-4.099-6.208-3.516-14.075.512-20.065l6.066-9.019 3.247-.1L30.37 17.974l-.169 2.624-6.33 6.377 13.156 13.155 6.376-6.33 2.625-.169L62.58 46.302l-.1 3.248-9.019 6.065c-5.99 4.029-13.857 4.611-20.065.512Z"
        clipRule="evenodd"
      />
    </svg>
  );
}

export function MagicLogo({ width = 28 }) {
  return (
    <svg
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
      width={width}
    >
      <path d="M15 7.473h-4.284l3.95-1.645-.412-.998-3.965 1.64 3.034-3.043-.762-.763L9.54 5.693l1.642-3.951-.996-.416-1.648 3.97V1H7.462v4.277L5.846 1.321l-.996.413 1.637 3.972-3.048-3.04-.762.761 3.021 3.029-3.944-1.642-.415.995 3.969 1.664H1v1.079h4.283l-3.95 1.618.413.998 3.966-1.64-3.035 3.04.762.763 3.021-3.026-1.642 3.95.996.416 1.648-3.962V15h1.076v-4.29l1.616 3.956.996-.41-1.623-3.965 3.034 3.04.762-.764-3.021-3.026 3.944 1.646.415-.998-3.969-1.637H15v-1.08zm-4.308 0v1.079l-.409.992-.756.758-.989.39H7.462l-.989-.409-.756-.758-.41-.992v-1.06l.41-.993.756-.758.989-.407h1.076l.989.41.756.758.41.99z" />
    </svg>
  );
}

export function Avatar({ width = 32 }) {
  return (
    <svg
      width={width}
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
    >
      <path d="M9.806 7.452a3.25 3.25 0 11-3.612-5.404 3.25 3.25 0 013.612 5.404zM6.793 9h2.42a5.442 5.442 0 013.736 1.475 4.908 4.908 0 011.551 3.55l-.5.475H2l-.5-.475a4.908 4.908 0 011.552-3.552A5.443 5.443 0 016.792 9z" />
    </svg>
  );
}

export function Email({ width = 32 }) {
  const id = useId();
  return (
    <svg
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      width={width}
      fill="currentColor"
    >
      <g clipPath={`url(#${id})`}>
        <path
          fillRule="evenodd"
          d="M3.728 4l.5-.5h11.286l.5.5v7.983l-.5.5H4.228l-.5-.5V4zm4.037 3.963l-3.037 2.862v-5.68l3.037 2.818zm-2.277 3.52L8.5 8.644l1.03.956h.68l1.031-.955 3.013 2.838H5.488zm9.526-.658v-5.68l-3.038 2.818 3.037 2.862zM9.87 8.552L5.502 4.5h8.737L9.871 8.552z"
        />
        <path d="M.75 6.5H3v-1H.75v1zM3 8.5H0v-1h3v1zM.75 10.5H3v-1H.75v1z" />
      </g>
      <defs>
        <clipPath id={id}>
          <path d="M0 0h16v16H0z" />
        </clipPath>
      </defs>
    </svg>
  );
}

export function Chat({ width = 32 }) {
  return (
    <svg
      width={width}
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
    >
      <path d="M14 2H2l-.5.5v11.165l.863.345L5.215 11H14l.5-.5v-8L14 2zm-.5 8H4.785L2.5 12.411V3h11v7z" />
      <path d="M12.5 4.503h-9v1h9v-1zM12.5 7h-9v1h9V7z" />
    </svg>
  );
}

export function Phone({ width = 32 }) {
  return (
    <svg
      width={width}
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
    >
      <path d="M15 7.473h-4.284l3.95-1.645-.412-.998-3.965 1.64 3.034-3.043-.762-.763L9.54 5.693l1.642-3.951-.996-.416-1.648 3.97V1H7.462v4.277L5.846 1.321l-.996.413 1.637 3.972-3.048-3.04-.762.761 3.021 3.029-3.944-1.642-.415.995 3.969 1.664H1v1.079h4.283l-3.95 1.618.413.998 3.966-1.64-3.035 3.04.762.763 3.021-3.026-1.642 3.95.996.416 1.648-3.962V15h1.076v-4.29l1.616 3.956.996-.41-1.623-3.965 3.034 3.04.762-.764-3.021-3.026 3.944 1.646.415-.998-3.969-1.637H15v-1.08zm-4.308 0v1.079l-.409.992-.756.758-.989.39H7.462l-.989-.409-.756-.758-.41-.992v-1.06l.41-.993.756-.758.989-.407h1.076l.989.41.756.758.41.99z" />
    </svg>
  );
}

export function Sparkles({ width = 32 }) {
  return (
    <svg
      width={width}
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
    >
      <path
        d="M10.72 1.5H9.265v3.198l1.455.004V1.5ZM7.36 3.347l1.516 1.517-1.032 1.025-1.513-1.513 1.03-1.029ZM4.485 6.28h3.202l-.005 1.455H4.485V6.28Zm1.848 3.36 1.515-1.516 1.026 1.032-1.512 1.512-1.03-1.029Zm2.932 2.875V9.313l1.455.005v3.197H9.265Zm3.36-1.845-1.517-1.517 1.032-1.026 1.514 1.514-1.03 1.029ZM15.5 7.735h-3.202l.005-1.455H15.5v1.455Zm-1.847-3.359-1.516 1.516-1.025-1.032 1.513-1.513 1.028 1.03ZM2 1.829v.82h-.822v1.315H2v.821h1.314v-.82h.821V2.65h-.821v-.821H2Zm0 12.842v-1.5H.5v-1.314H2v-1.499h1.314v1.499h1.5v1.314h-1.5v1.5H2Z"
        fill="currentColor"
      />
    </svg>
  );
}

export function ArrowCycle({ width = 32 }) {
  return (
    <svg
      width={width}
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
    >
      <path d="M7.999 2c1.53 0 3.004.586 4.117 1.638l-.317-2.088.988-.15.558 3.664-3.666.557-.15-.989 1.882-.285a4.982 4.982 0 101.46 2.528l.976-.225A6 6 0 117.999 2z" />
    </svg>
  );
}

export function Gear({ width = 32 }) {
  return (
    <svg
      width={width}
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
    >
      <path d="M12.375 7.409a.523.523 0 100-1.046.523.523 0 000 1.046z" />
      <path
        fillRule="evenodd"
        d="M3.863 2.183L4.25 2h7.5l.387.183 2.25 2.75.113.317v.14l.002.002v3.213l-.5.5H2l-.5-.5V5.25l.113-.317 2.25-2.75zM2.5 5.892v2.213h11.002V6.25H13.5v-.358h-11zm10.56-1H2.94L4.486 3h7.026l1.548 1.892z"
      />
      <path d="M12.375 12.303a.523.523 0 100-1.047.523.523 0 000 1.046z" />
      <path
        fillRule="evenodd"
        d="M2 9.785l-.5.5v3.213l.5.5h12.002l.5-.5v-3.213l-.5-.5H2zm.5 3.213v-2.213h11.002v2.213H2.5z"
      />
    </svg>
  );
}

export function Storage({ width = 32 }) {
  return (
    <svg
      width={width}
      fill="currentColor"
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      aria-hidden="true"
      focusable="false"
    >
      <path
        fillRule="evenodd"
        d="M12.116 2.57c-.973-.326-2.384-.546-3.991-.546-1.607 0-3.018.22-3.99.545-.492.164-.814.337-.992.478a.89.89 0 00-.082.072c.02.069.078.158.225.268.21.158.548.313 1.025.448.947.266 2.292.409 3.814.409 1.522 0 2.867-.143 3.814-.41.477-.134.816-.29 1.025-.447.147-.11.204-.2.225-.268a.884.884 0 00-.082-.072c-.178-.141-.5-.314-.991-.478zM4.02 4.818a5.18 5.18 0 01-.97-.369v1.757c0 .079.039.206.25.377.214.173.556.347 1.03.5.944.306 2.284.49 3.795.49 1.51 0 2.85-.184 3.794-.49.474-.153.817-.327 1.03-.5.212-.171.251-.298.251-.377V4.45a5.18 5.18 0 01-.97.369c-1.08.304-2.534.45-4.105.45-1.571 0-3.026-.146-4.105-.45zm10.23 1.388V3.05C14.25 1.917 11.508 1 8.125 1S2 1.917 2 3.049V12.95C2 14.083 4.742 15 8.125 15s6.125-.917 6.125-2.049V6.207zM13.2 7.654c-.28.157-.602.29-.95.403-1.083.35-2.543.54-4.125.54-1.582 0-3.042-.19-4.125-.54a5.258 5.258 0 01-.95-.403v1.712c0 .078.039.205.25.376.214.173.556.348 1.03.501.944.306 2.284.489 3.795.489 1.51 0 2.85-.183 3.794-.489.474-.153.817-.328 1.03-.5.212-.172.251-.299.251-.377V7.654zM4 11.215a5.253 5.253 0 01-.95-.403v2.058c.018.019.047.046.093.083.178.141.5.314.992.478.972.325 2.383.545 3.99.545 1.607 0 3.018-.22 3.99-.545.492-.164.814-.337.992-.478a.809.809 0 00.093-.083v-2.058a5.25 5.25 0 01-.95.403c-1.083.351-2.543.541-4.125.541-1.582 0-3.042-.19-4.125-.54zm9.224 1.624s0 .002-.004.006a.028.028 0 01.004-.006zm-10.198 0l.004.006a.024.024 0 01-.004-.006zm1.599-6.29c.29 0 .525-.23.525-.512a.519.519 0 00-.525-.513c-.29 0-.525.23-.525.513 0 .282.235.512.525.512zM5.15 9.28a.519.519 0 01-.525.513.519.519 0 01-.525-.513c0-.282.235-.512.525-.512.29 0 .525.23.525.512zm-.525 3.671c.29 0 .525-.23.525-.512a.519.519 0 00-.525-.512c-.29 0-.525.23-.525.512 0 .283.235.512.525.512z"
      />
    </svg>
  );
}

export function MultiCloud({ width = 32 }) {
  const id = useId();
  return (
    <svg
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      width={width}
      aria-hidden="true"
      focusable="false"
      fill="currentColor"
    >
      <g clipPath={`url(#${id})`}>
        <path d="M15.13 6.94a2.468 2.468 0 0 0-1.597-.571 3.99 3.99 0 0 0-6.726-2.227c-.03 0-.057-.004-.086-.004a3.972 3.972 0 0 0-3.677 2.429 2.865 2.865 0 0 0-1.958.67A3.047 3.047 0 0 0 0 9.54a2.977 2.977 0 0 0 2.97 2.97h7.65a2.51 2.51 0 0 0 2.095-1.13h.775a2.531 2.531 0 0 0 1.64-4.44Zm-4.509 4.57H2.965A1.973 1.973 0 0 1 1 9.54a2.037 2.037 0 0 1 .729-1.537 1.84 1.84 0 0 1 1.196-.44c.123.001.246.012.368.034l.434.075.13-.422a2.995 2.995 0 0 1 5.857.796l.015.57.564-.09a1.582 1.582 0 0 1 1.32.305A1.544 1.544 0 0 1 12.132 10a1.512 1.512 0 0 1-1.51 1.51Zm2.868-1.13H13.1a2.532 2.532 0 0 0-.838-2.31 2.469 2.469 0 0 0-1.596-.572 3.965 3.965 0 0 0-2.54-3.109 2.995 2.995 0 0 1 4.455 2.528l.016.57.564-.09a1.584 1.584 0 0 1 1.32.305 1.546 1.546 0 0 1 .076 2.236 1.512 1.512 0 0 1-1.068.443Z"></path>
      </g>
      <defs>
        <clipPath id={id}>
          <path d="M0 0h16v16H0z" />
        </clipPath>
      </defs>
    </svg>
  );
}

export function BrowserWindow({ width = 32 }) {
  return (
    <svg
      width={width}
      fill="currentColor"
      role="presentation"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 64 64"
      aria-hidden="true"
      focusable="false"
    >
      <path d="M14.51 21.45a2.09 2.09 0 1 0 0-4.18 2.09 2.09 0 0 0 0 4.18Zm6.69 0a2.09 2.09 0 1 0 0-4.18 2.09 2.09 0 0 0 0 4.18Zm6.7 0a2.09 2.09 0 1 0 0-4.18 2.09 2.09 0 0 0 0 4.18Z" />
      <path d="M56 11.92H8l-2 2v39.87l2 2h48l2-2V13.92l-2-2Zm-2 4v6.88H10v-6.88h44ZM10 51.79v-25h44v25H10Z" />
    </svg>
  );
}
